<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '学生管理',
	},
}
</route>

<template>
	<view class="page-manage h-[100vh] box-border">
		<fly-navbar backgroundColor="#fff" leftText="学生管理" fixed />
		<view class="relative h-full box-border pb-[283rpx] box-border">
			<scroll-view scroll-y class="h-full">
				<view class="w-full px-8 pb-4 pt-[280rpx] box-border">
					<view
						v-for="(item, index) in list"
						:key="item.id"
						@tap="change(index)"
						class="w-full h-[167rpx] rounded-[83rpx] px-4 py-4 box-border flex justify-between items-center mb-4"
						:style="{ background: item.type === 0 ? '#FFF3F3' : '#E7F0FD' }"
					>
						<view class="flex justify-between items-center">
							<image
								class="w-[105rpx] h-[105rpx] rounded-[50%] border-1 border-solid border-[#fff] mr-1"
								src="/static/tabbar/myS.png"
							></image>
							<view class="flex flex-col pl-2 py-4">
								<text class="text-[#303030] text-[33rpx]">{{ item.name }}</text>
								<text class="text-[#5E5E5E] text-[24rpx] mt-2">{{ item.school }}</text>
							</view>
						</view>
						<uni-data-checkbox
							v-model="item.checked"
							v-if="item.checked[0]"
							multiple
							:selectedColor="item.type === 0 ? '#ED8876' : '2979ff'"
							:localdata="range"
						></uni-data-checkbox>
					</view>
					<view
						@tap="toPersonal"
						class="w-full h-[97rpx] rounded-[83rpx] text-[#303030] text-[32rpx] flex justify-center items-center"
						:style="{ background: '#F6F7F9' }"
					>
						<uni-icons type="plusempty" class="mr-1"></uni-icons> 添加学生
					</view>
				</view>
			</scroll-view>
			<view class="w-full h-[283rpx] absolute bottom-0 left-0">
				<view class="w-full h-full relative">
					<image
						class="w-[430rpx] h-[105rpx] absolute left-[50%] -translate-x-[50%] top-0 z-1"
						src="/static/my/personal-success.png"
					></image>
					<view
						@tap="confirm"
						class="w-[430rpx] h-[105rpx] flex justify-center items-center absolute text-[#F4F7F4] text-[40rpx] left-[50%] -translate-x-[50%] top-0 z-2"
						>确 定</view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
export default {
	options: { styleIsolation: 'shared' },
};
</script>
<script lang="ts" setup>
const range = [{ text: '', value: true }];
const list = ref([
	{ id: 999, type: 0, name: '谢安琪', school: '长江实验小学', checked: [false] },
	{ id: 1000, type: 1, name: '谢哲毕', school: '长江实验小学', checked: [false] },
]);

const change = index => {
	list.value.forEach(item => {
		item.checked = [false];
	});
	list.value[index].checked = [true];
};

const confirm = () => {
	console.log('list', list.value);
	// uni.switchTab({
	//     url: "/pages/index/index"
	// })
};

const toPersonal = () => {
	uni.navigateTo({
		url: '/pages-user/personal/index',
	});
};
</script>

<style lang="scss">
page {
	background: #fff;
}
</style>
<style lang="scss" scoped>
.page-manage {
	:deep(.uni-data-checklist .checklist-group .checklist-box) {
		margin: 0;

		.checkbox__inner {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;

			.checkbox__inner-icon {
				top: 3px;
				left: 7px;
			}
		}
	}
}
</style>
